Cloos-Kraus Design System

Previsualisation interactive des composants et tokens

Palettes de couleurs

Primary (Rose corail)

50
100
200
300
400
500
600
700
800
900
950

Couleur principale (#F36E5B)

Secondary (Gris fonce)

50
100
200
300
400
500
600
700
800
900
950

Couleur texte principal (#373A3C)

Tertiary (Gris clair / Background)

50
100
200
300
400
500
600
700
800
900
950

Couleur background (#F5F5F5) et bordures de cartes

Success

100
300
500
700
900

Warning

100
300
500
700
900

Error

100
300
500
700
900

Neutral (Grayscale)

100
300
600
800
900

Couleurs specifiques

Page Background

#F6F6F6

Background principal du body

Premium Golf Navy

#1F2553

Background boxe Premium Golf-Equipment

Typographie

Proxima Nova (Police principale)

Cloos-Kraus utilise Proxima Nova pour tous les textes (titres et corps)

Proxima Nova Light 300 - Titres legers

Proxima Nova Regular 400 - Corps de texte

Proxima Nova Medium 500 - Titres moyens

Proxima Nova Semibold 600 - Titres H2-H4

Proxima Nova Bold 700 - Titres H1

Echelle typographique (Responsive)

Mobile (<768px) → Tablet (768-1023px) → Desktop (≥1024px)

H1 - 35px Mobile / 40px Tablet / 45px Desktop - Bold

Titre de niveau 1

H2 - 30px Mobile / 32px Tablet / 35px Desktop - Semibold

Titre de niveau 2

H3 - 22px Mobile / 24px Tablet / 25px Desktop - Semibold

Titre de niveau 3

H4 - 20px (toutes tailles) - Semibold

Titre de niveau 4

Body - 18px (toutes tailles) - Regular

Paragraphe standard pour le corps de texte principal des pages.

Body Small - 16px (toutes tailles) - Regular

Paragraphe petit pour notes et metadonnees.

Boutons

Variantes de boutons

Primary Button (Hero Style - RECOMMANDE)

Bouton primary

translateY(-4px) + couleur plus foncee au survol

Primary Button (Rose) - Sans shine

Secondary Button (Blanc) - ideal sur fond colore

Outline Button (Rose)

Text Button (Link)

Tailles variees

Boutons sur fond rose

Secondary Button (Blanc)

Outline Button (Blanc)

Formulaires

Cartes

Philosophie Cloos-Kraus : Bordure fine au repos + legere ombre au survol pour un style epure et interactif.

Carte standard (recommande)

Sans ombre

Bordure fine #F5F5F5 uniquement. Style epure.

Carte interactive

Ombre au hover

Legere ombre et soulèvement au survol.

Carte highlight

Bordure rose

Mise en avant avec bordure de couleur primaire.

Badges & Tags

Categorie Succes Alerte Erreur Neutre

Alertes & Messages

Information

Ceci est un message informatif pour l'utilisateur.

Succes

Votre action a ete effectuee avec succes.

Avertissement

Attention, cette action necessite votre confirmation.

Erreur

Une erreur s'est produite, veuillez reessayer.

Principes de design

Coins legerement arrondis (5px)

Tous les elements utilisent un border-radius subtil de 5px.

Ombre legere au survol

Les cartes interactives ont une legere ombre au survol.

Survolez cette carte

Espacement entre sections

Padding vertical entre les grandes sections de page. Responsive selon le breakpoint.

50px

Mobile (<768px)

py-[50px]
70px

Tablet (768-1023px)

md:py-[70px]
120px

Desktop (≥1024px)

lg:py-[120px]

Implementation:

<section class="py-[50px] md:py-[70px] lg:py-[120px]">